<script setup lang="ts">
import { ElDropdown, ElDropdownItem, ElDropdownMenu, ElInput, ElMessage } from "element-plus";
import UpSearch from "@/components/r-search/up-search.vue";
import ColumnsShow from "@/components/r-search/columns-show.vue";

const print = () => {
  ElMessage.info('可使用导出，然后打开在打印')
}

export interface UpSearchObj {
  label: string,
  value: string | boolean
}

export interface Column extends UpSearchObj { }

const props = defineProps({
  search_value: {
    type: String,
    default: ''
  },
  upSearchObj: {
    type: Array,
    default: [] as UpSearchObj[],
  },
  columns_show: {
    type: Array,
    default: [] as UpSearchObj[],
  }
})

const emits = defineEmits(['update:search_value', 'on_search', 'update:upSearchObj','on_up_search'])

const search_key = ref(props.search_value)
const search_obj = ref(props.upSearchObj)
watch(search_key, () => {
  emits('update:upSearchObj', search_obj)
})

const on_up_search = () => {
  console.log(11)
  emits('on_up_search')
}
</script>

<template>
  <el-input style="width: 120px;" placeholder="输入关键字" v-model="search_key"
    @input="emits('update:search_value', search_key)" />
  <el-dropdown split-button trigger="click" @click="emits('on_search')">
    搜索
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>
          <up-search v-model:up-search-obj="search_obj" @on-search="on_up_search" />
        </el-dropdown-item>
        <el-dropdown-item>
          <columns-show :columns_show="columns_show" />
        </el-dropdown-item>
        <el-dropdown-item>
          <div @click="print">打印</div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped></style>